﻿<phone:PhoneApplicationPage 
    x:Class="Coding4Fun.Toolkit.Test.WindowsPhone.Samples.MetroFlow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:c4f="clr-namespace:Coding4Fun.Toolkit.Controls;assembly=Coding4Fun.Toolkit.Controls" 
    xmlns:ms="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls" 
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="800" d:DesignWidth="480">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
		<ms:Pivot Title="{StaticResource AppName}">
			<ms:PivotItem Header="metroflow" Margin="0, 30, 0, 0">
				<StackPanel>
					<TextBlock>Load items at design time</TextBlock>
					<c4f:MetroFlow
						Name="loadDataAtDesignTime"
						SelectedColumnIndex="{Binding ElementName=colIndex, Path=Value}"
						SelectionChanged="MetroFlow_SelectionChanged" 
						SelectionTap="MetroFlow_SelctionTap">
						<c4f:MetroFlow.Items>
							<c4f:MetroFlowData 
								ImageUri="../media/images/trex_360width.jpg"
								Title="rawr" />
							<c4f:MetroFlowData
								ImageUri="../media/images/Seattle.jpg"
								Title="hello from seattle" />
							<c4f:MetroFlowData 
								ImageUri="../media/images/robot.jpg"
								Title="my t-shirt cannon" />
						</c4f:MetroFlow.Items>
					</c4f:MetroFlow>
					<Grid Margin="12, 12">
						<Grid.ColumnDefinitions>
							<ColumnDefinition />
							<ColumnDefinition />
						</Grid.ColumnDefinitions>
						<Grid.RowDefinitions>
							<RowDefinition />
							<RowDefinition />
							<RowDefinition />
						</Grid.RowDefinitions>
						<StackPanel 
							Grid.Row="0"
							Grid.Column="0"
							Orientation="Horizontal">
							<TextBlock 
								Foreground="{StaticResource PhoneSubtleBrush}" 
								Text="selected: " />
							<TextBlock Name="SelectionChanged"/>
						</StackPanel>
						<StackPanel 
							Grid.Row="0"
							Grid.Column="1"
							Orientation="Horizontal">
							<TextBlock 
								Foreground="{StaticResource PhoneSubtleBrush}" 
								Text="tapped: " />
							<TextBlock Name="SelectionTap"/>
						</StackPanel>
						<c4f:SuperSlider
							Grid.Row="1"
							Grid.ColumnSpan="2"
							Name="colIndex"
							Value="1"
							StepFrequency="1"
							Title="selected index" />

						<c4f:RoundButton
							Grid.Row="2"
							Grid.Column="0"
							ImageSource="..\media\icons\appbar.minus.rest.png"
							Label="Remove"
							Click="Remove_Click"/>
						<c4f:RoundButton
							Grid.Row="2"
							Grid.Column="1"
							ImageSource="..\media\icons\appbar.add.rest.png"
							Label="Add"
							Click="Add_Click" />
					</Grid>
					
					
					<TextBlock>Load items at runtime</TextBlock>
					<c4f:MetroFlow 
						Name="loadDataAtRunTime"
						Margin="0, 0, 0, 12" />
				</StackPanel>
			</ms:PivotItem>
			<ms:PivotItem Header="item">
				<StackPanel>					
					<c4f:MetroFlowItem
						Height="120"
						Title="____Loading image at design time"
						ItemIndex="123"
						ItemIndexOpacity="1"
						ItemIndexVisibility="Visible"
						Margin="0, 12"
						ImageSource="/Media/images/robot.jpg"/>

					<c4f:MetroFlowItem 
						Height="120"
						Margin="0, 12"
						Name="loadImageAtRunTime"
						Title="Loading image at runtime" />
				</StackPanel>
			</ms:PivotItem>
		</ms:Pivot>
	</Grid>
</phone:PhoneApplicationPage>